<template>
  <div>
    <div class="payContainer">
      <div class="orderFlowContainer">
        <div class="topContent">
          <div class="stepIcon style1 bitmap"></div>
          <div class="stepTitle">查看购物袋</div>
        </div>
        <div class="stepLine stepLineFinshed topContent bitmap"></div>
        <div class="topContent">
          <div class="stepIcon style2 bitmap"></div>
          <div class="stepTitle">确认订单信息</div>
        </div>
        <div class="stepLine stepLineUnfinished topContent bitmap"></div>
        <div class="topContent">
          <div class="stepIcon style3 bitmap"></div>
          <div class="stepTitle">成功提交订单</div>
        </div>
      </div>
      <div class="deliveryAddressTitleContainer">
        <h2 class="deliveryAddressTitle">配送至 昌平区 回龙观街区</h2>
        <span class="divisionLine"></span>
        <p class="explain">
          请在20分内提交订单，下单后你另有 30 分钟的支付时间
        </p>
      </div>
      <PayTitle :content="'收货信息'"></PayTitle>
      <AddOrChooseAddress></AddOrChooseAddress>
      <PayTitle :content="'商品清单'"></PayTitle>
      <div class="goodsInfoContainer">
        <div class="goodsInfoContent">
          <div class="goodsInfoTitleHeader">
            <ul class="goodsInfoTitleList">
              <li class="title">
                <span>唯品会</span>
                发货订单
              </li>
              <li class="size attrStyle">
                <span>尺码</span>
              </li>
              <li class="price attrStyle">
                <span>价格</span>
              </li>
              <li class="count attrStyle">
                <span>数量</span>
              </li>
            </ul>
          </div>
          <div class="goodsInfoBody">
            <div class="time">
              预计
              <em>明天</em>
              到达
            </div>
            <GoodsInfo
              :goodsName="'【美白淡斑紧致】水光臻白弹润面膜套装（18片）淡斑紧致面膜'"
              :goodsSize="'美白淡斑·珍珠双膜组*12片+黄金面膜*6（功效款式任发）'"
              :goodsPrice="98"
              :goodsCount="1"
            ></GoodsInfo>
            <GoodsInfo
              :goodsName="'植物补水面膜40片套装 保湿提亮补水细致毛孔免洗面贴膜'"
              :goodsSize="'40片'"
              :goodsPrice="116"
              :goodsCount="1"
            ></GoodsInfo>
            <GoodsInfo
              :goodsName="'雪域龙胆亮润面膜26mL*5PCS'"
              :goodsSize="'26mL*5PCS'"
              :goodsPrice="0"
              :goodsCount="1"
            ></GoodsInfo>
          </div>
          <div class="goodsInfoFooter">
            <span class="priceContent">
              本组商品金额
              <span class="price">¥174</span>
            </span>
            <span class="saleContent">
              已享受优惠：
              <span class="sale">-¥40</span>
            </span>
            <span class="costContent">
              运费：
              <span class="cost">免运费</span>
            </span>
          </div>
        </div>
      </div>
      <div class="payInfoContainer">
        <PayTitle :content="'支付信息'"></PayTitle>
        <div class="payInfoContent">
          <div class="myAsset">
            <PayInfoTitle :content="'我的资产'"></PayInfoTitle>
            <div class="myAssetTitle">
              <input type="checkbox" :disabled="false" />
              <a href="javascript:;">
                <span>唯品卡支付</span>
              </a>
              <i>余额 0 元</i>
            </div>
          </div>
          <div class="payWay">
            <PayInfoTitle :content="'支付方式'"></PayInfoTitle>
          </div>
          <div class="billInfo">
            <PayInfoTitle :content="'发票信息'"></PayInfoTitle>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderFlow from "./components/OrderFlow";
import PayTitle from "./components/PayTitle";
import AddOrChooseAddress from "./components/AddOrChooseAddress";
import GoodsInfo from "./components/GoodsInfo";
import PayInfoTitle from "./components/PayInfoTitle";

export default {
  name: "Pay",
  components: {
    OrderFlow,
    PayTitle,
    AddOrChooseAddress,
    GoodsInfo,
    PayInfoTitle,
  },
};
</script>

<style lang="less" scoped>
.payContainer {
  width: 960px;
  margin: auto;
}
//订单流程
.orderFlowContainer {
  margin: 0 auto 30px;
  width: 610px;
  height: 84px;
}
.bitmap {
  background-image: url(https://ccp.vipstatic.com/img/cart/te/4/commons/sprites-hash-29a8cdc6.png?741290b2);
}
.orderFlowContainer .topContent {
  width: 100px;
  font-size: 14px;
  float: left;
  text-align: center;
  color: #acb2b5;
}
.topContent .stepIcon {
  width: 100px;
  height: 50px;
}
.style1 {
  background-position: -468px -290px;
}
.style2 {
  background-position: -364px -290px;
}
.style3 {
  background-position: -462px -199px;
}
.orderFlowContainer .stepLine {
  width: 152px;
  height: 50px;
}
.stepLineFinshed {
  background-position: 0 -290px;
}
.stepLineUnfinished {
  background-position: -306px -199px;
}
//配送地址title
.deliveryAddressTitleContainer {
  height: 25px;
  line-height: 25px;
}
.deliveryAddressTitle {
  float: left;
  font-size: 16px;
}
.deliveryAddressTitleContainer .divisionLine {
  width: 1px;
  height: 18px;
  background-color: #eee;
  float: left;
  margin-left: 10px;
  margin-top: 3px;
}
.deliveryAddressTitleContainer .explain {
  font-size: 15px;
}
//商品列表样式
.goodsInfoContainer {
  margin-top: 26px;
  margin-bottom: 60px;
  .goodsInfoContent {
    margin: 0 15px;
    .goodsInfoTitleHeader {
      border-bottom: 1px solid lightgray;
      margin-bottom: 15px;
      .goodsInfoTitleList {
        padding-bottom: 6px;
        overflow: hidden;
        li {
          float: left;
          height: 24px;
          line-height: 24px;
        }
        .title {
          font-size: 16px;
          font-weight: 700;
          color: #333;

          width: 522px;
        }
        .attrStyle {
          width: 124px;
          text-align: center;
          color: #999;
        }
        .price {
          width: 160px;
        }
        .count {
          text-align: right;
        }
      }
    }
    .goodsInfoBody {
      width: 100%;
      .time {
        height: 16px;
        line-height: 16px;
        margin-bottom: 15px;
      }
    }
    .goodsInfoFooter {
      padding-top: 10px;
      border-top: 1px solid lightgray;
      overflow: hidden;
      span {
        font-size: 12px;
        margin-left: 30px;
        font-weight: 700;
      }
      .costContent {
        float: right;
        .cost {
          margin-left: 0;
        }
      }
      .saleContent {
        float: right;
        .sale {
          margin-left: 0;
        }
      }
      .priceContent {
        float: right;
        .price {
          margin-left: 0;
          color: #f10180 !important;
        }
      }
    }
  }
}
//支付信息
.payInfoContainer {
  .payInfoContent {
    padding: 26px 15px 0 15px;
    .myAsset {
      height: 66px;
      .myAssetTitle {
        height: 32px;
        input {
          width: 19px;
          height: 15px;
          transform: translateY(2px);
        }
        a {
          margin-left: 10px;
          text-decoration: none;
          span {
            font-size: 16px;
            line-height: 32px;
            height: 32px;
            top: -2px;
            color: black;
            &:hover {
              color: black;
            }
          }
        }
      }
    }
  }
}
</style>
